<template>
	<view>
		<uni-popup ref="sendpop" type="bottom">
			<view class="change_con">
				<view class="flex_align_center change_top">
					<image src="@/pages/groupbuy/static/mygroup/bg.png" mode="widthFix"></image>
					<view class="ex_t_in">
						<view class="ex_t_in_tit">助商额度赠送</view>
						<view>请输入助商额度并搜索用户完成赠送</view>
					</view>
				</view>
				<view class="ch_container">
					<!-- <view class="ch_b">
						<view class="ch_tip">请输入赠送额度</view>
						<view class="flex_between member_sea2">
							<label>助商额度</label>
							<input type="number" v-model="changeMoney" placeholder="请输入赠送额度">
						</view>
						<view class="ch_tag">本次操作至多可赠送<text>{{num}}</text>助商额度</view>
					</view> -->
					<view class="ch_tip">请搜索本次想要赠送的用户</view>
					<view class="flex_between member_sea">
						<input type="number" v-model="to_member_id" placeholder="请输入用户ID">
						<view class="flex_center search_btn" v-if="to_member_id!=''" @click="searchMember">
							<text>搜索</text>
							<image src="/static/sousuo.png" mode="widthFix"></image>
						</view>
						<view class="flex_center search_btn opacity5" v-else>
							<text>搜索</text>
							<image src="/static/sousuo.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="flex_center send_none" v-if="isNone"><image src="@/pages/groupbuy/static/mygroup/none.png"></image>未搜索到符合的用户信息</view>
					<view v-if="memberInfo.id">
						<view class="s_user flex_align_center">
							<image class="s_man" :src="memberInfo.avatar" mode="widthFix"></image>
							<view>
								<view class="flex_box">
									<view class="s_label">用户ID：</view>
									<view class="s_name">{{memberInfo.id}}</view>
								</view>
								<view class="flex_box">
									<view class="s_label">用户名称：</view>
									<view class="s_name">{{memberInfo.nickname}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex_center s_btn_sure" v-if="memberInfo.id" @click="$refs.exportStatusPopup.open()">已完成赠送用户选择，确认转让</view>
				<view class="flex_center s_btn_sure opacity5" v-else>请完成赠送用户选择</view>
			</view>
		</uni-popup>
		<uni-popup ref="exportStatusPopup" type="center" :mask-click="false">
			<view class="export_status">
				<image class="ex_sta_img1" :src="memberInfo.avatar"></image>
				<image class="ex_sta_img2" src="@/pages/groupbuy/static/mygroup/bg2.png"></image>
				<view class="ex_sta_con">
					<view class="ex_s_tit text-center">助商额度赠送提醒</view>
					<view class="ex_s_tip ex_s_tip text-center">请确认赠送信息</view>
					<view class="s_user">
						<view class="flex_box">
							<view class="s_label">账户昵称：</view>
							<view class="s_name clamp">{{memberInfo.nickname}}</view>
						</view>
						<view class="flex_box">
							<view class="s_label">账户ID：</view>
							<view class="s_name">{{memberInfo.id}}</view>
						</view>
						<view class="flex_box">
							<view class="s_label">赠送额度：</view>
							<view class="s_name">{{info.money}} 张</view>
						</view>
					</view>
					<view class="ex_s_tip ex_s_tip2 text-center">该操作不可撤回，请确认无误后再进行赠送</view>
					<view class="flex_between">
						<view class="flex_center s_btn_sure s_btn_sure2" @click="$refs.exportStatusPopup.close()">下次再说</view>
						<view class="flex_center s_btn_sure" @click="submit">确认赠送</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				info: {},
				to_member_id: '',
				changeMoney: '',
				memberInfo: [],
				isNone: false
			}
		},
		methods: {
			open(e) {
				this.to_member_id = '';
				this.memberInfo = [];
				this.info = e
				this.$refs.sendpop.open()
			},
			searchMember(){
				this.memberInfo = [];
				this.$axios('Shop/MemberSearch','POST','pintuan',{
					member_id: this.to_member_id
				}).then(res=>{
					if(res.data.code == 200){
						this.memberInfo = res.data.data;
						if(res.data.data?.id){
							this.isNone = false;
						}else{
							this.isNone = true;
						}
					}
				})
			},
			submit(){
				this.$refs.exportStatusPopup.close();
				this.$axios('Shop/GiftHelpCredit','POST','pintuan',{
					to_member_id: this.to_member_id,
					supplier_id: this.info.id
				}).then(res=>{
					if(res.data.code == 200){
						this.$api.msg(res.data.data);
						this.$emit('reload')
						this.$refs.sendpop.close();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.send_none{
		background: #CCCACD;
		line-height: 76rpx;
		border-radius: 16rpx;
		color: #13001E;
		margin-top: 30rpx;
		image{
			width: 36rpx;
			height: 36rpx;
			margin-right: 20rpx;
		}
	}
	.change_con{
		background: linear-gradient(180deg, rgba(136, 19, 226, 0.2) 0%, rgba(136, 19, 226, 0) 100%), #FFFFFF;
		width: 100%;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding: 10rpx 20rpx 0;
		padding-bottom: 50rpx;
		.change_top{
			image{
				width: 144rpx;
			}
			.ex_t_in{
				color: #5B5B5B;
				font-size: 24rpx;
				.ex_t_in_tit{
					color: #13001E;
					font-size: 40rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
			}
		}
		.ch_b{
			border-bottom: 2rpx dashed #f2f1f3;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
		}
		.ch_container{
			background-color: #fff;
			border-radius: 24rpx;
			padding: 20rpx;
			padding-bottom: 30rpx;
			.ch_tip{
				color: #13001E;
				font-weight: bold;
				position: relative;
				padding-left: 14rpx;
				margin-bottom: 20rpx;
				&::before{
					content: "";
					position: absolute;
					width: 4rpx;
					height: 24rpx;
					background: #9A1FE8;
					border-radius: 210rpx;
					left: 0;
					top: 8rpx;
				}
			}
		}
		.s_btn_sure{
			height: 84rpx;
			margin: 0 30rpx;
			width: auto;
		}
	}
	.s_btn_sure{
		background: #8813E2;
		color: #fff;
		font-weight: bold;
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		border-radius: 24rpx;
		margin-top: 20rpx;
	}
	.member_sea2{
		border: 2rpx solid #CCCACD;
		line-height: 76rpx;
		width: 100%;
		border-radius: 16rpx;
		padding: 0 20rpx;
		label{
			color: #13001E;
			font-weight: bold;
			white-space: nowrap;
		}
		input{
			border: none;
			height: 76rpx;
			flex: 1;
			padding: 0 20rpx;
		}
	}
	.member_sea{
		label{
			color: #13001E;
			font-weight: bold;
			margin-right: 20rpx;
			white-space: nowrap;
		}
		input{
			border: 2rpx solid #CCCACD;
			height: 64rpx;
			flex: 1;
			padding: 0 20rpx;
			border-radius: 16rpx;
			background: #fff;
		}
	}
	.search_btn{
		color: #FFFFFF;
		font-weight: bold;
		width: 160rpx;
		height: 64rpx;
		border-radius: 16rpx;
		background: #9A1FE8;
		margin-left: 20rpx;
		image{
			width: 28rpx;
			margin-left: 10rpx;
		}
	}
	.s_user{
		padding-top: 20rpx;
		line-height: 64rpx;
		position: relative;
		width: 88%;
		margin: 0 auto;
		font-size: 30rpx;
		color: #13001E;
		.s_man{
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			right: 0;
			top: 20rpx;
			border-radius: 50%;
			flex-shrink: 0;
			position: static;
			margin-right: 20rpx;
		}
		.s_label{
			font-weight: bold;
			white-space: nowrap;
		}
	}
	.ch_tag{
		font-size: 24rpx;
		color: #5B5B5B;
		padding-left: 10rpx;
		margin-top: 16rpx;
		text{
			color: #9A1FE8;
			font-weight: bold;
			padding: 0 10rpx;
		}
	}
	.export_status{
		width: 572rpx;
		position: relative;
		height: 860rpx;
		.ex_sta_img1{
			width: 226rpx;
			position: absolute;
			height: 226rpx;
			border-radius: 50%;
			z-index: 2;
			left: 0;
			right: 0;
			margin: auto;
		}
		.ex_sta_img2{
			width: 100%;
			position: absolute;
			top: 110rpx;
			height: 650rpx;
		}
		.ex_sta_con{
			width: 100%;
			top: 246rpx;
			position: absolute;
			padding: 0 40rpx;
			text-align: center;
			.ex_s_tit{
				color: #13001E;
				font-size: 36rpx;
				font-weight: bold;
			}
			.ex_s_tip{
				color: #9A1FE8;
				margin-top: 6rpx;
			}
			.ex_s_tip2{
				font-size: 24rpx;
				color: #5B5B5B;
				margin-top: 20rpx;
			}
			.s_btn_sure{
				line-height: 86rpx;
				border-radius: 86rpx;
				width: 48%;
			}
			.s_btn_sure2{
				background: #f0defc;
				color: #9A1FE8;
			}
		}
		
	}
</style>